<template>
	<view class="container">
		<!-- 轮播图 -->
		<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item v-for="(item, index) in detail.images" :key="index">
				<image :src="item" mode="aspectFill" />
			</swiper-item>
		</swiper>
		
		<!-- 商品信息 -->
		<view class="info-section">
			<view class="price-row">
				<text class="price">¥{{ detail.price }}</text>
				<text class="original-price" v-if="detail.originalPrice">¥{{ detail.originalPrice }}</text>
			</view>
			<view class="title">{{ detail.name }}</view>
			<view class="desc">{{ detail.description }}</view>
		</view>
		
		<!-- 规格选择 -->
		<view class="specs-section">
			<view class="section-title">规格</view>
			<view class="specs-list">
				<view 
					class="specs-item" 
					:class="{ active: selectedSpec === item.id }"
					v-for="item in detail.specs" 
					:key="item.id"
					@tap="selectSpec(item.id)"
				>
					{{ item.name }}
				</view>
			</view>
		</view>
		
		<!-- 商品详情 -->
		<view class="detail-section">
			<view class="section-title">商品详情</view>
			<rich-text :nodes="detail.detail"></rich-text>
		</view>
		
		<!-- 底部操作栏 -->
		<view class="bottom-bar">
			<view class="action-buttons">
				<view class="action-buttons-left">
					<view class="action-buttons-left-item">
						<image src="/static/tabbar/home.png" mode=""></image>
						<text>首页</text>
					</view>
					<view class="action-buttons-left-item">
						<image src="/static/tabbar/shoppingCart.png" mode=""></image>
						<text>购物车</text>
					</view>
					
				</view>
				
				<view class="action-buttons-right">
					<button class="action-btn primary" @tap="addToCart">加入购物车</button>
					<button class="action-btn primary" @tap="buyNow">立即购买</button>
				</view>
				
			</view>
		</view>
		<uv-popup ref="popup" mode="bottom" @change="change" overlay="true" closeOnClickOverlay="true" safeAreaInsetBottom="true" :closeable="true" round="30rpx" @maskClick="popupMaskClick" customStyle="maHeight: 80vh;">
			<!-- customStyle="height: 60vh;" -->
			<view class="popup">
				<view class="popup-header">
					<image src="" mode=""></image>
					<view class="popup-header-price">
						<text>￥</text>
						<text>0.9</text>
						<text>元/件</text>
					</view>
				</view>
				<view class="popup-address">
					<view class="popup-address-left">
						<image src="/static/icon/addressIcon.png" mode=""></image>
						<text>请选择地址</text>
					</view>
					<view class="popup-address-right">
						<image src="/static/icon/goToIcon.png" mode=""></image>
					</view>
				</view>
				<view class="popup-specification">
					<view class="popup-specification-header">
						<view class="popup-specification-header-left">
							颜色（4）
						</view>
						<view class="popup-specification-header-right" v-if="!isListModul" @click="changeShowModule(true)">
							<image src="/static/icon/listIcon.png" mode=""></image>
							<text>列表</text>
						</view>
						<view class="popup-specification-header-right" v-if="isListModul"  @click="changeShowModule(false)">
							<image src="/static/icon/blockListIcon.png" mode=""></image>
							<text>大图</text>
						</view>
					</view>
					<scroll-view class="popup-specification-scroll" scroll-x="false" scroll-y="true" scroll-top="0">
						<view class="popup-specification-blocklist" v-if="!isListModul">
							<view class="popup-specification-blocklist-item">
								<image src="" mode=""></image>
								<text>眠冬小舍GYXH-4-01名称显示区域</text>
							</view>
							<view class="popup-specification-blocklist-item">
								<image src="" mode=""></image>
								<text>眠冬小舍GYXH-4-01名称显示区域</text>
							</view>
							<view class="popup-specification-blocklist-item">
								<image src="" mode=""></image>
								<text>眠冬小舍GYXH-4-01名称显示区域</text>
							</view>
							<view class="popup-specification-blocklist-item">
								<image src="" mode=""></image>
								<text>眠冬小舍GYXH-4-01名称显示区域</text>
							</view>
							<view class="popup-specification-blocklist-item">
								<image src="" mode=""></image>
								<text>眠冬小舍GYXH-4-01名称显示区域</text>
							</view>
							<view class="popup-specification-blocklist-item">
								<image src="" mode=""></image>
								<text>眠冬小舍GYXH-4-01名称显示区域</text>
							</view>
							<view class="popup-specification-blocklist-item">
								<image src="" mode=""></image>
								<text>眠冬小舍GYXH-4-01名称显示区域</text>
							</view>
						</view>
						<view class="popup-specification-list" v-if="isListModul">
							<view class="popup-specification-list-item">
								<view class="popup-specification-list-item-left">
									<image src="" mode=""></image>
									<view class="popup-specification-list-item-left-info">
										<text class="popup-specification-list-item-left-info-title">眠冬小舍GYXH-4-01</text>
										<view class="popup-specification-list-item-left-info-text">
											<text>￥0.9</text>
											<text>|</text>
											<text>库存:9999</text>
										</view>
									</view>
								</view>
								<view class="popup-specification-list-item-right">
									<uv-number-box v-model="value">
										<template v-slot:minus>
											<view class="minus">
												<image src="/static/icon/delNumIcon.png" style="width: 56rpx;height: 56rpx;" v-if="value > 0"></image>
												<image src="/static/icon/delNumIcon_none.png" style="width: 56rpx;height: 56rpx;" v-else></image>
											</view>
										</template>
										<template v-slot:input>
											<text style="width: 50px;text-align: center;" class="input">{{value}}</text>
										</template>
										<template v-slot:plus>
											<view class="plus">
												<image src="/static/icon/addNumIcon.png" style="width: 56rpx;height: 56rpx;" v-if="value > 0"></image>
												<image src="/static/icon/addNumIcon_none.png" style="width: 56rpx;height: 56rpx;" v-else></image>
											</view>
										</template>
									</uv-number-box>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="popup-count" v-if="!isListModul">
					<view class="popup-count-left">
						<text>数量</text>
						<text>库存:9999</text>
					</view>
					<view class="popup-count-right">
						<uv-number-box v-model="value">
							<template v-slot:minus>
								<view class="minus">
									<image src="/static/icon/delNumIcon.png" style="width: 56rpx;height: 56rpx;"></image>
								</view>
							</template>
							<template v-slot:input>
								<text style="width: 50px;text-align: center;" class="input">{{value}}</text>
							</template>
							<template v-slot:plus>
								<view class="plus">
									<image src="/static/icon/addNumIcon.png" style="width: 56rpx;height: 56rpx;"></image>
								</view>
							</template>
						</uv-number-box>
					</view>
				</view>
				<view class="popup-footer">
					<uv-button type="primary" @tap="addToCart" shape="circle" color="#FF1400" customTextStyle="fontSize: 36rpx;">加入购物车</uv-button>
				</view>
			</view>
			
		</uv-popup>
	</view>
</template>

<script>

export default {
	components: {
		
	},
	data() {
		return {
			id: null,
			detail: {
				name: '示例贴纸',
				price: 99,
				originalPrice: 199,
				description: '这是一个示例贴纸描述',
				images: ['/static/demo/decals.jpg'],
				specs: [
					{ id: 1, name: '小号' },
					{ id: 2, name: '中号' },
					{ id: 3, name: '大号' }
				],
				detail: '<div>商品详情内容</div>',
			},
			selectedSpec: null,
			isShowPopup: false,
			value: 9999,
			isListModul: true,
		}
	},
	onLoad(options) {
		this.id = options.id
		this.loadDetail()
	},
	methods: {
		async loadDetail() {
			try {
				// 这里替换为实际的API调用
				// const res = await this.$api.getDecalDetail(this.id)
				// this.detail = res.data
			} catch (error) {
				uni.showToast({
					title: '加载失败',
					icon: 'none'
				})
			}
		},
		selectSpec(specId) {
			this.selectedSpec = specId
		},
		goToCart() {
			uni.switchTab({
				url: '/pages/cart/cart'
			})
		},
		addToCart() {
			this.$refs.popup.open();
			// this.isShowPopup = true
			// if (!this.selectedSpec) {
			// 	uni.showToast({
			// 		title: '请选择规格',
			// 		icon: 'none'
			// 	})
			// 	return
			// }
			
			// 这里添加购物车逻辑
			// uni.showToast({
			// 	title: '已加入购物车',
			// 	icon: 'success'
			// })
		},
		buyNow() {
			if (!this.selectedSpec) {
				uni.showToast({
					title: '请选择规格',
					icon: 'none'
				})
				return
			}
			
			// 这里添加立即购买逻辑
			uni.navigateTo({
				url: '/pages/order/confirm'
			})
		},
		
		// 弹窗事件
		popupMaskClick() {
			this.$refs.popup.close();
		},

		changeShowModule(isListModul) {
			console.log(isListModul)
			this.isListModul = isListModul
		}
	}
}
</script>

<style lang="scss">
.container {
	min-height: 100vh;
	background-color: #f5f5f5;
	padding-bottom: 100rpx;
}

.swiper {
	width: 100%;
	height: 750rpx;
	
	image {
		width: 100%;
		height: 100%;
	}
}

.info-section {
	background-color: #fff;
	padding: 30rpx;
	margin-bottom: 20rpx;
	
	.price-row {
		margin-bottom: 20rpx;
		
		.price {
			font-size: 40rpx;
			color: #ff6b6b;
			font-weight: bold;
			margin-right: 20rpx;
		}
		
		.original-price {
			font-size: 28rpx;
			color: #999;
			text-decoration: line-through;
		}
	}
	
	.title {
		font-size: 32rpx;
		color: #333;
		margin-bottom: 16rpx;
	}
	
	.desc {
		font-size: 28rpx;
		color: #666;
	}
}

.specs-section {
	background-color: #fff;
	padding: 30rpx;
	margin-bottom: 20rpx;
	
	.section-title {
		font-size: 32rpx;
		color: #333;
		margin-bottom: 20rpx;
	}
	
	.specs-list {
		display: flex;
		flex-wrap: wrap;
		
		.specs-item {
			padding: 10rpx 30rpx;
			background-color: #f5f5f5;
			border-radius: 28rpx;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			font-size: 28rpx;
			color: #666;
			
			&.active {
				color: #fff;
				background-color: #333;
			}
		}
	}
}

.detail-section {
	background-color: #fff;
	padding: 30rpx;
	
	.section-title {
		font-size: 32rpx;
		color: #333;
		margin-bottom: 20rpx;
	}
}

.bottom-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: 152rpx;
	background-color: #fff;
	display: flex;
	align-items: center;
	padding: 0rpx 10rpx 0 20rpx;
	box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
	
	.action-buttons {
		flex: 1;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		width: 100%;
		height: 100%;
		.action-buttons-left{
			display: flex;
			align-items: center;
			justify-content: flex-start;
			margin-top: 8rpx;
			.action-buttons-left-item{
				width: 112rpx;
				height: 112rpx;
				display: flex;
				flex-flow: column;
				justify-content: flex-start;
				align-items: center;
				image{
					width: 64rpx;
					height: 64rpx;
				}
				text{
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 20rpx;
					color: #000000;
				}
			}
		}
		.action-buttons-right{
			display: flex;
			align-items: center;
			justify-content: flex-end;
			margin-top: 12rpx;
			button{
				width: 228rpx;
				height: 84rpx;
				font-size: 32rpx;
				margin: 0 !important;
				&:nth-child(1){
					background-color: #FFBD33;
					border-radius: 16rpx 0 0 16rpx;
					
				}
				&:nth-child(2){
					background-color: #EC483A;
					border-radius: 0rpx 16rpx 16rpx 0rpx;
				}
			}
		}
		.action-btn {
			flex: 1;
			height: 84rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			margin: 0 10rpx;
			border-radius: 36rpx;
			background-color: #f5f5f5;
			color: #666;
			
			&.primary {
				background-color: #333;
				color: #fff;
			}
			
			.iconfont {
				margin-right: 8rpx;
			}
		}
	}
}

.popup{
	width: 100%;
	background-color: #FCFCFC;
	.popup-header{
		display: flex;
		align-items: center;
		justify-content: flex-start;
		width: 100%;
		padding: 32rpx;
		box-sizing: border-box;
		image{
			width: 144rpx;
			height: 144rpx;
			border: 1px solid #E5E5E5;
		}
		.popup-header-price{
			display: flex;
			align-items: baseline;
			justify-content: flex-start;
			margin-left: 20rpx;
			text{
				color: #FF0000;
				&:nth-child(2){
					font-size: 40rpx;
				}
			}
		}
	}
	.popup-address{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		padding: 0 36rpx;
		height: 136rpx;
		background-color: #FFFFFF;
		box-sizing: border-box;
		.popup-address-left{
			display: flex;
			align-items: center;
			justify-content: flex-start;
			image{
				width: 48rpx;
				height: 48rpx;
			}
			text{
				font-size: 28rpx;
				color: #000000;
				margin-left: 16rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
			}
		}
		.popup-address-right{
			display: flex;
			align-items: center;
			justify-content: flex-end;
			image{
				width: 32rpx;
				height: 32rpx;
			}
		}
	}
	.popup-specification{
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex-flow: column;
		width: 100%;
		.popup-specification-header{
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			padding: 32rpx;
			box-sizing: border-box;
			.popup-specification-header-left{
				display: flex;
				align-items: center;
				justify-content: flex-start;
				font-family: PingFang SC, PingFang SC;
				font-weight: 600;
				font-size: 28rpx;
				color: #000000;
			}
			.popup-specification-header-right{
				display: flex;
				align-items: center;
				justify-content: flex-start;
				image{
					width: 32rpx;
					height: 32rpx;
				}
				text{
					font-size: 28rpx;
					color: #000000;
					margin-left: 16rpx;
				}
			}
		}
		.popup-specification-blocklist{
			display: flex;
			align-items: flex-start;
			flex-wrap: wrap;
			justify-content: flex-start;
			width: 100%;
			padding: 0 22rpx;
			box-sizing: border-box;
			gap: 30rpx 10rpx;
			.popup-specification-blocklist-item{
				width: 230rpx;
				height: 292rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				flex-flow: column;
				border-radius: 16rpx;
				overflow: hidden;
				background-color: #F5F5F5;
				image{
					width: 226rpx;
					height: 226rpx;
				}
				text{
					width: 100%;
					padding: 0 4rpx;
					height: 64rpx;
					font-size: 20rpx;
					color: #000000;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					text-align: center;
				}
			}
		}
		.popup-specification-list{
			display: flex;
			align-items: flex-start;
			flex-flow: column;
			justify-content: flex-start;
			width: 100%;
			padding: 0 22rpx;
			box-sizing: border-box;
			gap: 30rpx 0rpx;
			.popup-specification-list-item{
				width: 100%;
				height: 88rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				overflow: hidden;
				.popup-specification-list-item-left{
					display: flex;
					align-items: center;
					justify-content: flex-start;
					image{
						width: 88rpx;
						height: 88rpx;
					}
					.popup-specification-list-item-left-info{
						display: flex;
						flex-flow: column;
						align-items: flex-start;
						justify-content: flex-start;
						.popup-specification-list-item-left-info-title{
							font-family: PingFang SC, PingFang SC;
									font-weight: 600;
									font-size: 28rpx;
									color: rgba(0,0,0,1);
						}
						.popup-specification-list-item-left-info-text{
							text{
								&:nth-child(1){
									font-family: PingFang SC, PingFang SC;
									font-weight: 600;
									font-size: 24rpx;
									color: rgba(0,0,0,0.5);
								}
								&:nth-child(2){
									margin: 0 10rpx;
								}
								&:nth-child(3){
									font-family: PingFang SC, PingFang SC;
									font-weight: 400;
									font-size: 24rpx;
									color: rgba(0,0,0,0.5);
								}
							}
						}
					}
				}
			}
		}
	}
	.popup-count{
		width: 100%;
		height: 128rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 36rpx;
		box-sizing: border-box;
		.popup-count-left{
			display: flex;
			align-items: center;
			justify-content: flex-start;
			text{
				&:nth-child(1){
					font-size: 28rpx;
					color: #000000;
					font-family: PingFang SC, PingFang SC;
					font-weight: 600;
				}
				&:nth-child(2){
					font-size: 22rpx;
					color: #000000;
					margin-left: 16rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					margin-left: 16rpx;
				}
				
			}
		}
		
	}
	.popup-footer{
		width: 100%;
		height: 152rpx;
		box-shadow: 2rpx 0rpx 20rpx 0rpx rgba(0,0,0,0.08);
		background-color: #FFFFFF;
		padding: 36rpx;
		box-sizing: border-box;
	}
	.popup-specification-scroll{
		max-height: 634rpx;
		min-height: 300rpx;
		height: 100%;
		overflow-y: scroll;
	}
}
</style> 